<template>
    <!-- <h1>num: {{ num }}</h1>
    <button @click="clickBtn">点击修改 num</button> -->

    <!-- <div class="box1" @click="clickBox1"> -->
    <!-- 阻止事件冒泡 -->
    <!-- <div class="box2"  @click.stop="clickBox2"></div> -->

    <!-- 阻止事件冒泡, 并且事件执行一次后, 自动解绑 -->
    <!-- <div class="box2" @click.stop.once="clickBox2"></div>
    </div> -->

    <!-- <button @click="clickBtn()">需要给我的事件传递一个参数</button> -->

    <button @click="getEvent1">点击获取事件对象</button>
    <button @click="getEvent2('随手写的一个字符串')">点击获取事件对象</button>
    <button @click="getEvent3('随手写的一个字符串', $event)">
        点击获取事件对象
    </button>
    <button v-on:click="getEvent3('随手写的一个字符串', $event)">
        点击获取事件对象
    </button>
</template>

<script>
export default {
    // 专门存储响应式数据
    data() {
        return {
            num: 100,
            msg: "你能看到我吗",
        };
    },
    // 专门存储 我们的 事件函数
    methods: {
        getEvent1(e) {
            console.log("没有传递参数: ", e);
        },

        getEvent2(msg) {
            // console.log("传递参数: ", msg);
            console.log("传递参数: ", event);
        },
        getEvent3(msg, e) {
            console.log("传递参数: ", e);
        },

        clickBtn() {
            this.num--;
        },
        clickBox1() {
            console.log("点击了红色盒子");
        },
        clickBox2() {
            console.log("点击了绿色盒子");
        },

        clickBtn(msg) {
            console.log("触发了事件", msg);
        },
    },
};
</script>

<style scoped>
.box1 {
    width: 300px;
    height: 300px;
    background-color: red;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: green;
}
</style>
